import React from 'react';
// import {} from 'prop-types';
import { Row, Col, Button, Card } from 'antd';
import { Link } from '@umijs/max';
import { PageContainer } from '@ant-design/pro-components';
import { SwapOutlined, EditOutlined } from '@ant-design/icons';
// import { isObject } from 'lodash-es';

import {
  flowChart,
  rectChart,
  topo,
} from '../flowChartSchema'
import FlowChart from '../FlowChart';

const dataSource = [
  {
    id: 2,
    url: '/flowchart/2',
    title: '员工信息登记表',
    description: '编辑于 2023-02-28 22:06',
    content: '员工个人信息登记表模板',
    schema: flowChart,
  },
  {
    id: 3,
    url: '/flowchart/3',
    title: '领取办公用品',
    description: '编辑于 2023-02-28 22:06',
    schema: topo,
  },
  {
    id: 5,
    url: '/flowchart/5',
    title: '自定义流程图',
    description: 'for background applications, UED Team.',
    schema: rectChart,
  },
  // {
  //   id: 6,
  //   url: '/flowchart/6',
  //   title: '周末聚会',
  //   description: 'for background applications, UED Team.',
  //   schema: rectChart,
  // },
  // {
  //   id: 7,
  //   url: '/flowchart/7',
  //   title: '自定义流程图',
  //   description: 'for background applications, UED Team.',
  //   schema: rectChart,
  // },
];

// FlowChartList.propTypes = {};
function FlowChartList() {

  return (
    <PageContainer
      className='pageContainer'
      extra={[
        <Link to='/flowchart/designer' key={'new'}>
          <Button type='link'>
            <EditOutlined />
            新建流程图
          </Button>
        </Link>,
        <Button
          key={'sort'}
          type={'text'}
          icon={<SwapOutlined rotate={90} />}
        />
      ]}
    >
      <Row
        gutter={[16, 16]}
        className='mb-5'
      >
        {
          dataSource.map((it, i) => (
            <Col span={6} key={i}>
              <Card
                title={<Link to={it.url}>{it.title}</Link>}
                bordered={false}
                size={"small"}
                bodyStyle={{height: 240}}
              >
                <FlowChart
                  schema={it.schema}
                  fitView
                  thumbnail
                  control={false}
                  // theme='dark'
                />
              </Card>
            </Col>
          ))
        }
      </Row>
    </PageContainer>
  );
}

export default FlowChartList;
